 <template>
  <main>
    <van-nav-bar
      title="缓存管理"
      right-text="剩余空间：9.99G"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs v-model="active">
      <!-- 已完成 -->
      <van-tab title="已完成">
        <div>
          <button class="btn" @click="onClickEdit">
            {{ editshow ? "完成" : "管理" }}
          </button>
          <div class="art-box">
            <van-checkbox
              class="boxleftcheck"
              v-show="editshow"
              v-model="checked"
            ></van-checkbox>
            <div class="art-boxleft">
              <img src="@/assets/jl.png" alt="jl" class="img" />
            </div>
            <div class="art-boxright">
              <p>
                <van-text-ellipsis
                  content="计算机人工智能、应用程序开发、编程语言到变成思想"
                  rows="2"
                />
              </p>
              <ul>
                <li>
                  <div>
                    <p class="">已缓存4节</p>
                    <p>288M</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="bottombtn" v-show="editshow">
          <button id="leftbtn" style="color: black">
            <van-checkbox class="bottomcheck" v-model="checked"></van-checkbox
            >全选
          </button>
          <button>确定删除</button>
        </div>
      </van-tab>
      <!-- 缓存中 -->
      <van-tab title="缓存中">
        <div>
          <button class="btn" @click="onClickCache">
            {{ cacheshow ? "完成" : "管理" }}
          </button>
          <button class="btn2" @click="onClickAll">
            {{ allpause ? "全部开始" : "全部暂停" }}
          </button>
          <div class="art-box">
            <van-checkbox
              class="boxleftcheck"
              v-show="cacheshow"
              v-model="checked"
            ></van-checkbox>
            <div class="art-boxleft">
              <img src="@/assets/jl.png" alt="jl" class="img" />
            </div>
            <div class="art-boxright">
              <p>
                <van-text-ellipsis
                  content="计算机人工智能、应用程序开发、编程语言到变成思想"
                  rows="2"
                />
              </p>
              <ul>
                <li>
                  <div>
                    <p style="color: #ff6262; font-size: 13px">
                      已缓存4节/共10节
                    </p>
                    <p>288M</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="bottombtn" v-show="cacheshow">
          <button id="leftbtn" style="color: black">
            <van-checkbox class="bottomcheck" v-model="checked"></van-checkbox
            >全选
          </button>
          <button>确定删除</button>
        </div>
      </van-tab>
    </van-tabs>
  </main>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";

const active = ref(0);
const router = useRouter();
const route = useRoute();
const checked = ref(false);

// 全部暂停的状态
const allpause = ref(false);
const onClickAll = () => {
  allpause.value = !allpause.value;
};
// 已完成管理的状态
const editshow = ref(false);
const onClickEdit = () => {
  editshow.value = !editshow.value;
};
// 缓存管理的状态
const cacheshow = ref(false);
const onClickCache = () => {
  cacheshow.value = !cacheshow.value;
};
// 返回
const onClickLeft = () => {
  router.push("/learn");
};
console.log(route.query.name);
</script>
<style lang="less" scoped>
.btn {
  width: 8vh;
  border-radius: 20px;
  border: 0;
  height: 4vh;
  font-size: 14px;
  margin-left: 2.5vh;
  margin-top: 3vh;
}
.btn2 {
  width: 12vh;
  border-radius: 20px;
  border: 0;
  height: 4vh;
  font-size: 14px;
  margin-left: 2.5vh;
  margin-top: 3vh;
}
.art-box {
  padding: 15px 15px;
  display: flex;
  justify-content: space-between;
  .boxleftcheck {
    padding-right: 5px;
  }
  .art-boxleft {
    width: 120px;
    height: 90px;
    background-color: #666ee8;
    text-align: center;
    line-height: 75px;
    border-radius: 10px;
    margin-right: 5px;

    .img {
      width: 90px;
      height: 65px;
      align-items: center;
      vertical-align: middle;
    }
  }

  .art-boxright {
    width: 215px;
    height: 75px;
    border-radius: 10px;
    p {
      font-size: 14px;
    }
    ul {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      position: relative;
      top: 12px;
      color: #c5c5c5;
      p {
        font-size: 14px;
      }
    }
  }
}
.bottombtn {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  font-size: 2vh;
  border-top: 1px solid #d5d5d5;
  button {
    width: 50%;
    height: 50px;
    border: 0;
    text-align: center;
    background: white;
    color: rgb(0, 13, 255);
    .bottomcheck {
      display: inline-block;
      vertical-align: middle;
      margin-right: 1vh;
      margin-bottom: 0.7vh;
    }
  }
}
</style>